<template>
  <!-- 系统参数配置 -->
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 搜索框 -->
      <el-col :span="24">
        <div class="search-wrapper">
          <ul class="search-box">
            <li>
              <span class="filter-name">字典编码：</span>
              <el-select v-model="listQuery.dictCode" clearable placeholder="请输入字典编码" class="filter-item">
                <el-option v-for="item in allDictCode" :key="item.dictId" :label="item.codeNote" :value="item.dictCode"/>
              </el-select>
            </li>
            <li>
              <span class="filter-name">字典值：</span>
              <el-input placeholder="请输入字典值" style="width:150px" v-model="listQuery.dictValue"></el-input>
            </li>
            <li>
              <span class="filter-name">字典名称：</span>
              <el-input placeholder="请输入字典名称" style="width:150px" v-model="listQuery.dictName"></el-input>
            </li>
            <li style="padding-left:10px;">
              <el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="getList">查询</el-button>
            </li>
          </ul>
        </div>
      </el-col>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button type="primary" style="vertical-align:middle;margin-top:10px;margin-left: 5px" round size="mini" @click="dialogFormVisible = true">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData!=null">
            <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" :index="indexMethod" width="50">
              </el-table-column>
              <el-table-column prop="dictCode" label="字典编码">
              </el-table-column>
              <el-table-column prop="codeNote" :show-overflow-tooltip="true" label="编码备注" width="200">
              </el-table-column>
              <el-table-column prop="dictValue" label="字典值" width="200">
              </el-table-column>
              <el-table-column prop="dictName" label="字典名称" width="200">
              </el-table-column>
              <el-table-column prop="dictNote" :show-overflow-tooltip="true" label="字典备注" width="200" :formatter="dictNoteFormatter">
              </el-table-column>
              <el-table-column prop="dictState" label="字典状态" :formatter="formatter">
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                  <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle @click="deleteDicById(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="24">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
    <!-- 新增弹窗 -->
    <el-dialog title="新增设备" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row :gutter="5">
          <el-col :span="20">
            <el-form-item label="字典编码" prop="dictCode" :label-width="formLabelWidth">
              <el-input v-model="form.dictCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="20">
            <el-form-item label="编码备注" prop="codeNote" :label-width="formLabelWidth">
              <el-input v-model="form.codeNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="20">
            <el-form-item label="字典值" prop="dictValue" :label-width="formLabelWidth">
              <el-input v-model="form.dictValue" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="20">
            <el-form-item label="字典名称" :label-width="formLabelWidth">
              <el-input v-model="form.dictName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="20">
            <el-form-item label="字典备注" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.dictNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <!--<el-button size="medium" type="primary" @click="resetForm('form')">重 置</el-button>-->
        <el-button size="medium" type="success" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑  -->
    <el-dialog title="设备信息编辑" :visible.sync="dialogFormVisible1" width="40%">
      <el-form :model="oneCol" :rules="rules" ref="oneCol" v-if="oneCol">
        <el-row :gutter="5">
          <el-col :span="20">
            <el-form-item label="字典编码" prop="dictCode" :label-width="formLabelWidth">
              <el-input v-model="oneCol.dictCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 20px">
          <el-col :span="20">
            <el-form-item label="编码备注" prop="codeNote" :label-width="formLabelWidth">
              <el-input v-model="oneCol.codeNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 20px">
          <el-col :span="20">
            <el-form-item label="字典值" prop="dictValue" :label-width="formLabelWidth">
              <el-input v-model="oneCol.dictValue" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 20px">
          <el-col :span="20">
            <el-form-item label="字典名称" :label-width="formLabelWidth">
              <el-input v-model="oneCol.dictName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 20px">
          <el-col :span="20">
            <el-form-item label="字典备注" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="oneCol.dictNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="updateDictionary('oneCol')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                //字典分组下拉
                allDictCode:[],
                tableData:null,
                loading:false,
                dialogFormVisible:false,
                dialogFormVisible1:false,
                formLabelWidth:'120px',
                //默认数据总数
                dataCount:0,
                pageSizes:[5, 10, 20, 30, 40],
                //查询条件
                listQuery: {
                    currentPage:1,
                    pageSize:5
                },
                form:{},
                oneCol:{},
                rules: {
                    dictCode:[
                        { required: true, message: '请输入字典编码', trigger: 'blur' }
                    ],
                    dictValue:[
                        { required: true, message: '请输入字典值', trigger: 'blur' }
                    ],
                    codeNote:[
                        { required: true, message: '请输入字典编码备注', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.getList();
            this.queryAllDictCode();
        },
        methods:{
            getList() {
                this.loading=true;
                this.postRequest('/api/rcs/dic/getDicList',this.listQuery).then((res)=>{
                    if(res.data.status == 200){
                        this.tableData=res.data.data
                        this.dataCount=res.data.count;
                        this.loading = false
                    }else{
                        this.$message.error(res.data.msg);
                    }

                })
                    .catch((error)=>{
                        this.$message.error(error);
                    })
            },
            queryAllDictCode(){
                this.postRequest('/api/rcs/dic/queryDicAllDictCode').then((res) =>{
                        if (res.data.status == 200){
                            this.allDictCode = res.data.data;
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }
                )
                    .catch((error) =>{
                        this.$message.error(error);
                    })
            },
            formatter(row,column){
              if(row.dictState == 0){
                  return "有效";
              }
              return "无效";
            },
            dictNoteFormatter(row,column){
              return row.dictNote?row.dictNote:"-";
            },
            indexMethod(index) {
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },
            handleSizeChange(size) {
                this.listQuery.pageSize=size;
                this.listQuery.currentPage=1;
                this.getList()
            },
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage=currentPage;
                this.getList()
            },
            //编辑
            handleEdit(index, row){
                this.dialogFormVisible1=true;
                this.oneCol=row;
            },
            updateDictionary(formName){
                debugger
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      this.putRequest("/api/rcs/sysDictionary",this.oneCol).then((res)=>{
                          if(res.data.status == 200){
                              this.dialogFormVisible1 = false;
                              this.$message({
                                  message: '修改设备信息成功！',
                                  type: 'success'
                              });
                              this.getList()
                          }else{
                              this.$message.error("修改设备信息失败！");
                          }
                      })
                          .catch((error)=>{
                              this.$message.error(error)
                          })
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            //新增
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = "/api/rcs/dic/addDictionary";
                        this.postRequest(url,this.form).then((res)=>{
                            if(res.data.status == 200 && res.data.data === true){
                                this.dialogFormVisible = false;
                                this.$message({
                                    message: '新增字典成功！',
                                    type: 'success'
                                });
                                this.getList()
                            }else{
                                this.$message.error("存在相同的字典值和字典编码，新增失败！");
                            }
                        })
                            .catch((error)=>{
                                //错误信息
                                this.$message.error(error)
                            })
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            //删除单条
            deleteDicById(index,row){
                var url = "/api/rcs/dic/deleteDicById";
                this.$confirm("确认删除？").then(_ => {
                    this.postRequest(url,row).then((res)=>{
                        if(res.data.status == 200){
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            this.getList()
                        }else{
                            this.$message.error("删除失败！");
                        }
                    })
                        .catch((error)=>{
                            //错误信息
                            this.$message.error(error)
                        })
                })
            }
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>
<style scoped>

</style>